import React, { Component } from 'react'
import { Input, Select } from 'antd'
import { getExamType, getQuestionsType, getSubjectType, postExamQuestions } from '../../../api/exam'
// 富文本编辑器
import ReactWEditor from 'wangeditor-for-react'
import './addmanage.css'
const { Option } = Select

export default class AddManagement extends Component {
    state = {
        questionInfo: {
            // 题干
            questions_stem: "题干",
            // 试题的标题
            title: "题目主题",
            // 试题类型id
            questions_type_id: "",
            // 课程id
            subject_id: "",
            // 考试类型id
            exam_id: "",
            // 题目答案
            questions_answer: "",
            // 用户id
            user_id: sessionStorage.getItem('uId')
        },
        // 考试类型
        questions: [],
        // 课程类型
        subjects: [],
        questionsType: []
    }
    render() {
        const { questions, questionInfo, subjects, questionsType } = this.state
        return (
            <div className="box">
                <h4>题目信息</h4>
                <ul>
                    <li>
                        <h5>题干</h5>
                        <Input value={questionInfo.title} onChange={(ev) => {
                            let questionInfo = this.state.questionInfo
                            questionInfo.title = ev.target.value
                            this.setState({
                                questionInfo
                            })
                        }} placeholder="Basic usage" />
                    </li>
                    <li>
                        <h5>题目主题</h5>
                        <ReactWEditor
                            // value={value}
                            onChange={(html) => {
                                let questionInfo = this.state.questionInfo
                                questionInfo.questions_stem = html
                                this.setState({
                                    questionInfo
                                })
                            }}
                        />
                    </li>
                    <li>
                        <h5>请选择考试类型：</h5>
                        <Select defaultValue="周考1" style={{ width: 120 }} onChange={this.handleExamChange}>
                            {
                                questions.map(item => {
                                    return <Option key={item.exam_id} value={item.exam_id}>
                                        {item.exam_name}
                                    </Option>
                                })
                            }
                        </Select>
                    </li>
                    <li>
                        <h5>请选择课程类型：</h5>
                        <Select defaultValue="javaScript上" style={{ width: 120 }} onChange={this.handleSubjectChange}>
                            {
                                subjects.map(item => {
                                    return <Option key={item.subject_id} value={item.subject_id}>
                                        {item.subject_text}
                                    </Option>
                                })
                            }
                        </Select>
                    </li>
                    <li>
                        <h5>请选择题目类型：</h5>
                        <Select defaultValue="简答题" style={{ width: 120 }} onChange={this.handleTypeChange}>
                            {
                                questionsType.map(item => {
                                    return <Option key={item.questions_type_id} value={item.questions_type_id}>
                                        {item.questions_type_text}
                                    </Option>
                                })
                            }
                        </Select>

                    </li>
                    <li>
                        <h5>答案信息</h5>
                        <ReactWEditor
                            // value={value}
                            onChange={(html) => {
                                let questionInfo = this.state.questionInfo
                                questionInfo.questions_answer = html
                                this.setState({
                                    questionInfo
                                })
                            }}
                        />
                    </li>
                    <li>
                        <button onClick={() => {
                            this.addQuestion()
                        }}>提交</button>
                    </li>
                </ul>
            </div>
        )
    }

    addQuestion = () => {
        postExamQuestions(this.state.questionInfo).then(res => {
            console.log(123)
        })
    }


    handleExamChange = (value) => {
        let questionInfo = this.state.questionInfo
        questionInfo.exam_id = value
        this.setState({
            questionInfo
        })
        console.log(`selected ${value}`)
    }

    handleSubjectChange = (value) => {
        let questionInfo = this.state.questionInfo
        questionInfo.subject_id = value
        this.setState({
            questionInfo
        })
    }

    handleTypeChange = (value) => {
        let questionInfo = this.state.questionInfo
        questionInfo.questions_type_id = value
        this.setState({
            questionInfo
        })
    }

    componentDidMount() {
        getExamType().then(res => {
            this.setState({
                questions: res.data.data
            })
        })

        getQuestionsType().then(res => {
            this.setState({
                questionsType: res.data.data
            })
        })

        getSubjectType().then(res => {
            console.log(res.data.data)
            this.setState({
                subjects: res.data.data
            })
        })
    }
}
